<script>
import { newOptions, newsList } from '@/api/constant'
export default {
  name: 'NewsPage',
  data () {
    return {
      showOption: false,
      newOptions,
      activeValue: null,
      activePage: 1,
      newsList
    }
  },
  computed: {
    activeLabel () {
      return newOptions.find((el) => el.value === this.activeValue).label
    }
  },
  methods: {
    selectedValue (value) {
      this.activeValue = value
      this.showOption = false
    }
  }
}
</script>

<template>
  <div class="new-page">
    <div class="banner"></div>
    <div class="w">
      <div class="header">
        <div class="title">新闻动态</div>
        <div class="filter">
          <div class="all" @click="activeValue = null">全部</div>
          <div class="year">
            <div class="select">
              <div class="text" @click="showOption = !showOption">
                {{ activeLabel }}
              </div>
              <ul class="options" v-show="showOption">
                <li
                  v-for="{ label, value } in newOptions"
                  :key="label"
                  :class="{ active: activeValue === value }"
                  @click="() => selectedValue(value)"
                >
                  <!--  -->
                  {{ label }}
                </li>
              </ul>
            </div>
            <div class="icon-btn" @click="showOption = !showOption">
              <i class="icon">
                <img
                  v-show="!showOption"
                  :src="$url + '/icon/bottom.png'"
                  alt=""
                />
                <img v-show="showOption" :src="$url + '/icon/top.png'" alt="" />
              </i>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <!-- 6个 -->
        <div
          class="item"
          v-for="(item, i) in newsList"
          :key="i"
        >
          <div class="pic"></div>
          <div class="content">
            <div class="header">
              <div class="date">
                <div class="day">{{ item.day }}</div>
                <div class="year">{{ item.year }}</div>
              </div>
              <div class="icon"  @click="$router.push('/news/' + i)">
                <img
                  :src="$url + '/icon/right-white.png'"
                  alt=""
                />
              </div>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.new-page {
  .banner {
    height: 800px;
    background: url(http://www.yuhuachina.com/upload/img/202112/211206153942bfcfb7.jpg) -600px
      top / auto 100% no-repeat;
  }
  .w {
    margin: 0 100px 100px 100px;
    overflow: hidden;
    > .header {
      margin: 100px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #414099;
      .title {
        line-height: 1.6;
        font-size: 80px;
        font-weight: normal;
      }
      .filter {
        display: flex;
        margin: 30px 0;
        .all {
          font-size: 60px;
          color: #fff;
          text-align: center;
          background: #414099;
          width: 300px;
          height: 140px;
          line-height: 140px;
          border-radius: 20px;
          margin-right: 50px;
        }
        .year {
          flex: 1;
          display: flex;
          line-height: 140px;
          color: #fff;
          font-size: 60px;
          .select {
            padding: 0 30px;
            flex: 1;
            border: 0 none;
            width: 5em;
            border-radius: 20px 0 0 20px;
            background-color: #414099;
            text-align: center;
            position: relative;
            .options {
              position: absolute;
              left: 0;
              line-height: 140px;
              text-align: center;
              width: 100%;
              background-color: #414099;

              li.active {
                background-color: #6f6edf;
              }
            }
          }
          .icon-btn {
            width: 160px;
            text-align: center;
            background-color: #6f6edf;
            border-radius: 0 20px 20px 0;
            color: #fff;
            .icon {
              width: 100%;
              height: 100%;
              font-size: 50px;
            }
          }
        }
      }
    }

    .list {
      .item {
        padding: 40px;
        display: flex;
        border-radius: 20px;
        background-color: #fff;
        margin-bottom: 70px;
        .pic {
          width: 580px;
          background: url(http://www.yuhuachina.com/upload/img/202303/23032109224634d165.png)
            left top / 100% no-repeat;
        }

        .content {
          margin-left: 50px;
          flex: 1;
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .date {
              display: flex;
              align-items: flex-end;
              line-height: 1;
              padding-bottom: 5px;
              .day {
                font-size: 70px;
                font-weight: bold;
                margin-right: 20px;
              }
              .year {
                font-size: 50px;
                color: #999;
              }
            }
            .icon {
              width: 70px;
              height: 70px;
              background-color: #414099;
              border-radius: 50%;
              font-size: 50px;
            }
          }

          .title {
            margin: 50px 0;
            line-height: 1.6;
            font-size: 50px;
          }
          .text {
            font-size: 46px;
            color: #999;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
